<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构的改变</title>
</head>
<body>

 <div id="box1">

 </div>

 <select  id="sltCity"></select>

</body>
<script src="mock/cities.js"></script>
<script>

    /**
     *  ex1:
     * */
   var box1=  document.getElementById('box1');
 //  box1.innerHTML = '<div>innerBox</div>';

  var innerBox= document.createElement('div');
  innerBox.innerText = 'inner Box';

  box1.append(innerBox);


  /**
   *  ex2: 初始化select
   * */

   var sltCity= document.getElementById('sltCity');

    // for (var i = 0; i <cities.length ; i++) {
    //
    //      var opt ='<option value="'+cities[i].id+'">'+cities[i].name+'</option>';
    //      sltCity.innerHTML+= opt;
    // }

    for (var i = 0; i < cities.length; i++) {

        var opt = document.createElement('option');
        opt.value = cities[i].id;
        opt.text = cities[i].name;

        sltCity.append(opt);

    }

</script>
</html>